<template>
  <!-- 免押码可用 -->
  <codeCanUse :imgUrlFetching="imgUrlFetching" v-model:codeInfo="freeDeposistCodeInfo" v-if="freeDepositStatus.canUse" />
  <!-- 免押码不可用 -->
  <codeNotCanUse
    :imgUrlFetching="imgUrlFetching"
    :codeInfo="freeDeposistCodeInfo"
    :maskUrl="freeDepositStatus.notCanUseImgSrc"
    v-if="freeDepositStatus.notCanUse"
  />

  <!-- 异常状态 -->
  <view v-if="depositCodeError">
    <ve-empty :text="emptyText"></ve-empty>
  </view>
</template>
<script setup>
  import { onUnmounted } from 'vue'
  import { onLoad, onShow, onHide } from '@dcloudio/uni-app'
  import codeCanUse from './components/free-deposit-code/codeCanUse.vue'
  import codeNotCanUse from './components/free-deposit-code/codeNotCanUse.vue'
  import { ref, computed, nextTick } from 'vue'
  import { getFileSingle } from '@/api/common'
  import { getFreeDepositCodeInfo, getFreeDepositCode } from '@/api/order/sOrder'
  import { userStore } from '@/stores'
  const userInfoStore = userStore()
  // 企业信息
  userInfoStore.setEpDetail(false)

  // 免押码信息
  const freeDeposistCodeInfo = ref({})

  // 异常状态
  const emptyText = computed(() => {
    // 芝麻免押服务未开启
    if (userInfoStore.epAlipaySwitch != 1) {
      return '芝麻免押开关已关闭，请联系管理员'
    }
    return '芝麻免押开关已关闭，请联系管理员'
  })

  // 根据 codeInfo 获取免押码状态
  const getDepositCodeStatus = (codeInfo) => {
    const status = {
      canUse: false, // 免押码能使用
      notCanUse: false, // 免押码不能使用
      notCanUseImgSrc: '', // 免押码不能使用对应的遮罩图片地址
    }
    // 押金支付方式: 1 未缴纳 2 线下收款 3 网络平台代收 4 芝麻免押
    const depositPayType = codeInfo.depositPayType
    // 订单状态: 10 待排车 100 待交车 200 用车中 300 已还车 1000 已完成 -100 已取消
    const orderStatus = codeInfo.orderStatus
    // 情况1：免押码如果已经被使用了
    if (depositPayType == 4) {
      status.notCanUse = true
      status.notCanUseImgSrc = 'code-used.png'
      return status
    }
    // 情况2：线下已缴纳，失效
    if (depositPayType == 2 || depositPayType == 3) {
      // 线下收款或网络平台代收
      status.notCanUse = true
      status.notCanUseImgSrc = 'offline.png'

      return status
    }
    // 免押码未使用
    if (depositPayType == 1) {
      // 情况3：订单状态到已取消或已完成的、已还车
      // 已还车、已完成、已取消
      if ([300, 1000, -100].includes(orderStatus)) {
        status.notCanUse = true
        // 已还车
        if (orderStatus == 300) status.notCanUseImgSrc = 'order_status_300.png'
        // 已完成
        if (orderStatus == 1000) status.notCanUseImgSrc = 'order_status_1000.png'
        // 已取消
        if (orderStatus == -100) status.notCanUseImgSrc = 'order_status_-100.png'
        return status
      }
      // 情况4：待排车、待交车、用车中，校验是否开启芝麻免押
      if ([10, 100, 200].includes(orderStatus)) {
        // 芝麻免押服务开启
        if (userInfoStore.epAlipaySwitch == 1) {
          status.canUse = true
          return status
        } else {
          status.notCanUse = true
          status.notCanUseImgSrc = 'off-alipay.png'
        }
      }
    }
    return status
  }

  // 免押码状态
  const freeDepositStatus = computed(() => {
    const codeInfo = freeDeposistCodeInfo.value
    return getDepositCodeStatus(codeInfo)
  })

  const depositCodeError = ref(false)
  const imgUrlFetching = ref(false)
  /**
   * 获取免押码二维码
   */
  const getFreeImgCodeUrl = () => {
    getFreeDepositCode({ id: orderId.value, selectType: 2 })
      .then((res) => {
        const fileId = res.result
        if (fileId) {
          getImgUrlByFileId(fileId)
        } else {
          imgUrlFetching.value = false
        }
      })
      .catch(() => {
        imgUrlFetching.value = false
      })
  }
  /**
   * 通过文件id获取图片地址
   * @param fileId 文件id
   */
  const getImgUrlByFileId = (fileId) => {
    getFileSingle({ id: fileId }).then((res) => {
      if (res.code == 200 && res.result) {
        var url = res.result.openUrl
        freeDeposistCodeInfo.value.aliCodeUrl = url
        imgUrlFetching.value = false
      }
    })
  }

  const visible = ref(false)
  onShow(() => {
    visible.value = true
  })
  onUnmounted(() => {
    visible.value = false
  })
  /**
   * 轮询获取免押码状态
   * @param {Number} sleep 延时，单位毫秒
   */
  const startPollingGetDepositStatus = (sleep = 1000) => {
    // 延时获取最新的免押码状态
    setTimeout(() => {
      // 页面未跳转，并且当前免押码属于可扫码状态
      console.log('status', freeDepositStatus.value.canUse)
      if (visible.value && freeDepositStatus.value.canUse) {
        console.log('轮询获取免押码状态...')
        getFreeDepositCodeInfo({ id: orderId.value, selectType: 2 }).then((res) => {
          if (res.result) {
            // 监听到免押码变成已使用
            nextTick(() => {
              const isCanUse = getDepositCodeStatus(res.result).canUse
              // 轮询终止
              if (!isCanUse) {
                console.log('免押码状态已改变，终止轮询')
                // 重置编辑状态
                setDepositCodeDetail(res.result)
              } else {
                // 继续轮询
                startPollingGetDepositStatus(2000)
              }
            })
          }
        })
      } else {
        if (!visible.value) console.log('页面关闭，终止轮询')
      }
    }, sleep)
  }
  // 设置免押码详情
  const setDepositCodeDetail = (result) => {
    freeDeposistCodeInfo.value = result
    if (result.fileId) {
      getImgUrlByFileId(result.fileId)
    } else {
      imgUrlFetching.value = true
      getFreeImgCodeUrl()
    }
  }

  // 订单id
  const orderId = ref('')
  onLoad((options) => {
    // 通过订单id获取免押信息
    const id = options.orderId
    orderId.value = id
    uni.showLoading({
      title: '加载中...',
    })
    getFreeDepositCodeInfo({ id, selectType: 2 }).then((res) => {
      uni.hideLoading()
      const result = res.result
      // 如果接口正常返回了值
      if (result && Object.keys(result).length > 0) {
        setDepositCodeDetail(result)
        // 开启轮询监听
        startPollingGetDepositStatus(4000)
      } else {
        uni.hideLoading()
        // 显示异常
        depositCodeError.value = true
      }
    })
  })
</script>

<style lang="less" scoped></style>
